<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div style="display: flex; justify-content: space-between">
        <el-select
          v-model="listselect"
          placeholder="选择"
          clearable
          filterable
          @change="changelistselect(listselect)"
        >
          <el-option
            v-for="item in listdata_l"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button
          style="
            display: flex;
            justify-content: center;
            background-color: #9c446e;
            color: #fff;
          "
          size="default"
          @click="addclassdata"
          >添加</el-button
        >
      </div>
    </el-card>

    <el-table :data="listdata_r" border stripe>
      <el-table-column type="index" prop="col.id" label="序号" :width="80">
      </el-table-column>
      <el-table-column prop="col.id" label="标题" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            {{ row.title }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="主题" width="width">
        <template slot-scope="{ row, $index }">
          <div class="truncate">
            {{ row.littlecontent}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="时间" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            {{ row.time }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            <el-button
              v-if="row.ishow"
              type="success"
              size="mini"
              icon="el-icon-sort-up"
              circle
              @click="updatashop(row)"
            ></el-button>
            <el-button
              type="info"
              size="mini"
              icon="el-icon-sort-down"
              @click="updatashop(row)"
              v-else
              circle
            ></el-button>

            <el-button
              type="warning"
              size="mini"
              circle
              icon="el-icon-edit"
              @click="showshopdetail(row)"
            ></el-button>
            <el-button
              type="primary"
              size="mini"
              circle
              icon="el-icon-info"
              @click="maintenance(row)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              circle
              icon="el-icon-delete"
              @click="deletebut(row)"
            >
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      style="font-size: 30px; color: #000"
      title="详细信息"
      :visible.sync="drawer"
      :direction="direction"
      size="50%"
      :before-close="handleClose"
    >
      <div class="scroll-container">
        <!-- 此处放置需要滚动的内容 -->
        <!-- 名称 -->
        <el-row style="padding: 10px 0; color: #9c446e; font-size: 22px">
          <el-col :span="10">标题</el-col>
        </el-row>
        <el-row>
          <el-input
            v-model="rrow.title"
            placeholder="输入标题.."
            size="normal"
            clearable
          ></el-input>
        </el-row>
        <el-row style="padding: 10px 0; color: #9c446e; font-size: 22px">
          <el-col :span="6">主题</el-col>
          <el-col :span="15"
            ><el-input
              v-model="rrow.littlecontent"
              placeholder="内容核心"
              size="normal"
              clearable
            ></el-input
          ></el-col>
        </el-row>
        <!-- //描述 -->
        <el-row style="padding: 10px 0; color: #9c446e; font-size: 22px">
          <el-col :span="10">内容</el-col>
        </el-row>
        <el-row>
          <el-input
            type="textarea"
            :rows="15"
            placeholder="输入内容.."
            v-model="showcontent"
          >
          </el-input>
        </el-row>
        <el-row style="padding: 10px 0; color: #9c446e; font-size: 22px">
          <el-col :span="10">时间</el-col>
          <el-col :span="10">
            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker
          ></el-col>
        </el-row>

        <el-row style="display: flex; justify-content: center">
          <el-button
            style="background-color: #9c446e; color: #fff"
            size="default"
            @click="savecontent(rrow)"
            >保存</el-button
          >
        </el-row>
      </div>
    </el-drawer>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="60%"
      center
    >
      <el-collapse :accordion="true" >
        <el-collapse-item>
          <template slot="title" >
            <span style="font-size: 20px;color: #9c446e;">标题</span>
            <i class="header-icon el-icon-info"></i>
          </template>
          <div >
            {{ rrow.title }}
          </div>
        </el-collapse-item>
        <el-collapse-item >
          <template slot="title" >
            <span style="font-size: 16px;color: #9c446e;">主题</span>
          </template>
          <div>
            {{ rrow.littlecontent }}
          </div>
        </el-collapse-item>
        <el-collapse-item  >
          <template slot="title" >
            <span style="font-size: 16px;color: #9c446e;">内容资讯</span>
          </template>
          <div>
            
            {{ removeHTMLTags(rrow.content || '') }}
          </div>
        </el-collapse-item>
      </el-collapse>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import _ from "lodash";

export default {
  data() {
    return {
      listdata_r: [],
      listdata_l: [],
      listselect: "",
      binding: -1,
      isSale: true,
      drawer: false, //抽屉展示与隐藏
      direction: "rtl",
      rrow: {},
      showcontent: "",
      value1: "",
      centerDialogVisible: false,
    };
  },
  methods: {
    async updatashop(row) {
      // let result =await this.$API.sku.onsaveisshop(row.id)
      // if(result.code === 200){
      //   this.$message({type:"success",message:"成功上架"})
      // }
    },
    //下架数据的回调
    async downdatashop(row) {
      // let result=await this.$API.sku.downsaveisshop(row.id)
      // if(result.code === 200){
      //   this.$message({type:"warning",message:"已下架商品"})
      // }
    },
    showshopdetail(row) {
      this.drawer = true;
      this.rrow = row;
      this.sendshowcontent(this.rrow.content);
      // let result =await this.$API.sku.getshowshopdetail(row.id)
      // console.log(result);
      // if(result.code === 200){
      //   this.showshopdetaildata = result.data
      // }
    },
    //展示动态内容展示:
    sendshowcontent(a) {
      this.showcontent = this.removeHTMLTags(a);
    },
    //
    maintenance(row) {
      this.rrow = row;
      this.centerDialogVisible=true
    },
    //删除按钮的回调
    deletebut(row) {
      this.$message({
        message:"权限不够禁止删除...",
        type:"error"
      });
    },
    //清除所有HTML
    removeHTMLTags(html) {
      const replacedHtml = html.replace(/&nbsp;/g, " ");
      return replacedHtml.replace(/<\/?[^>]+(>|$)/g, "");
    },
    async getlistdata() {
      let result = await this.$API.text.getAPIgetlistdata_lorr();
      if (result.code === 200) {
        this.listdata_r = result.data.listdata_r;
        this.listdata_l = result.data.listdata_l;
      }
    },
    //课外数据id获取右侧数据
    async byleftlistdata(listselect) {
      let result = await this.$API.text.byleftlistdata(listselect);
      if (result.code === 200) {
        this.listdata_r = result.data.listdata_r;
      }
    },
    changelistselect(listselect) {
      this.binding = listselect;
      if (listselect) {
        this.byleftlistdata(listselect);
      } else {
        this.getlistdata();
      }
    },
    //发起修改保存回调
    async savecontent(row) {
      const dateObj = new Date(this.value1);

      // 获取年份、月份和日期
      const year = dateObj.getFullYear();
      const month = ("0" + (dateObj.getMonth() + 1)).slice(-2); // 月份从0开始，需要+1并补零
      const day = ("0" + dateObj.getDate()).slice(-2); // 补零
      // 构建日期字符串
      row.time = `${year}-${month}-${day}`;

      row.content = this.showcontent;
      row.binding = this.binding;
      let result = await this.$API.text.changeAPIgetlistdata_lorr(row);
      if (result.code == 200) {
        
        this.drawer = false;
        row.ishow = true;
        this.listdata_r.push(row);
        console.log(this.listdata_r);
        this.rrow = {};
        this.showcontent = "";
        this.$message({
          message: "保存成功",
          type:"success"
        })
      }
      
    },
    //确认关闭？
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    addclassdata() {
      if (this.listselect == "") {
        this.$message("请选择标题再添加资讯内容");
      } else {
        this.drawer = !this.drawer;
      }
      this.rrow = {}
    },
    //更换状态-节流回调:
    updatashop: _.throttle(function (row) {
      let index = this.listdata_r.findIndex((obj) => obj.id === row.id);

      this.listdata_r[index].ishow = !this.listdata_r[index].ishow;
      //发起请求:
      this.changeishow(row);
      if (this.listdata_r[index].ishow) {
        this.$message({
          message: "发布资讯",
          type: "success",
        });
      } else {
        this.$message({
          message: "下架资讯",
          type: "error",
        });
      }
    }, 1500),
    async changeishow(row_s) {
      let result = await this.$API.text.changelist1ishow(row_s);
    },
  },
  mounted() {
    this.getlistdata();
  },
};
</script>

<style scoped>
.truncate {
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  width: 200px; /* 设置宽度 */
}
.scroll-container {
  overflow-y: auto; /* 垂直滚动条 */
  max-height: 600px; /* 最大高度 */
}
</style>
